<template>
	<view class="recharge-order">
		<view class="header-box">
			<view>订单日期：</view>
			<uni-datetime-picker v-model="range" type="daterange" @change="confirmEvent"/>
		</view>
		<view class="time-box">
			<text>订单数：<text class="num-text">{{total || 0}}</text></text>
			<text>订单金额：<text class="num-text">￥{{orderAmount || 0}}</text></text>
		</view>
		<scroll-view scroll-y class="scroll-box" @scrolltolower="getDataEvent">
		<view class="main">
			<view class="card-box" v-for="(item,index) in listData" :key="index">
				<view class="card-title">订单编号：{{item.rechargeNumber}}</view>
				<view class="card-text">日期：{{item.createTime}}</view>
				<view class="card-text">充值：充{{item.rechargeMoney}}元送{{item.giftMoney}}元</view>
				<view class="card-text">门店：{{item.shopName}}</view>
				<view class="card-text">用户名：{{item.userName}}</view>
			</view>
			<view class="noMore">暂无更多</view>
		</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				range:[],
				listData:[],
				shopId:'',
				startDate:'',
				endDate:'',
				totalTime:0,
				pageSize: 10,
				pageNum: 1,
				total: 0,
				orderAmount:0
			};
		},
		methods:{
			// 选择日期
			confirmEvent(dateArr){
			   this.startDate = dateArr[0]
			   this.endDate = dateArr[1]
			   this.pageNum = 1
			   this.listData = []
			   this.getRechargeOrder()
			},
			getDataEvent(){
				if (this.listData.length < this.total) {
					this.pageNum++
					this.getRechargeOrder()
				}
			},
			// 获取充值订单列表
			getRechargeOrder(){
				const data = {
					pageSize:this.pageSize,
					pageNum:this.pageNum,
					shopId:this.shopId,
					startDate:this.startDate,
					endDate:this.endDate,
				}
				this.$request({
					method: 'post',
					url: '/applet/store/rechargeOrder/list',
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					if (res.rows?.length > 0) {
						this.listData = [...this.listData, ...res.rows]
					}
					this.total = res.total
					this.getRechargeOrderAmount();
				}).catch(err => {
					console.log('请求异常：', err)
				})
			},
			// 获取总充值订单金额
			getRechargeOrderAmount(){
				const data = {
					pageSize:this.pageSize,
					pageNum:this.pageNum,
					shopId:this.shopId,
					startDate:this.startDate,
					endDate:this.endDate,
				}
				this.$request({
					method: 'post',
					url: '/applet/store/rechargeOrder/totalAmount',
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					this.orderAmount = res.data;
				}).catch(err => {
					console.log('请求异常：', err)
				})
			}
		},
		onLoad(option){
			this.shopId = option.shopId;
			this.getRechargeOrder()
		}
	}
</script>

<style lang="scss" scoped>
   .recharge-order{
	   
	   .header-box{
		   background-color: #FFF;
		   display: flex;
		   padding: 10rpx 20rpx;
		   align-items: center;
		   font-size: 28rpx;
	   }
	   
	   .time-box{
		   font-weight: 600;
		   background: #FFF;
		   padding: 20rpx;
		   font-size: 30rpx;
		   display: flex;
		   align-items: center;
		   justify-content: space-between;
		   
		   .num-text{
			   color: #ff9600;
		   }
	   }
	   
	   .scroll-box{
		   height: calc(100vh - 248rpx);
	   }
	   
	   .main{
		   padding: 20rpx;
		   background: #FFF;
	   }
	   
	   .card-box{
		   background: #FFF;
		   border: 1px solid #EEE;
		   border-radius: 20rpx;
		   padding: 20rpx;
		   box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1);
		   margin-bottom: 20rpx;
	   }
	   
	   .card-title{
		   font-weight: bold;
		   font-size: 30rpx;
	   }
	   
	   .card-text{
		   color: #333;
		   font-size: 28rpx;
		   margin-top: 20rpx;
	   }
	   
	   .noMore {
	   	text-align: center;
	   	padding: 32rpx 0;
	   	color: #CCC;
	   	font-size: 28rpx;
	   }
   }
</style>
